<script setup lang="ts">
import { ref } from "vue";
const faqList = ref([
  {
    qustion: "现在qqq",
    value: "听说",
    type: "edit",
  },
  {
    qustion: "现在",
    value: "听说",
    type: "",
  },
]);
function addFaq() {
  faqList.value.push({
    qustion: "",
    value: "",
    type: "edit",
  });
}
function cancelFaq(index) {}
function saveFaq(index) {}
</script>
<template>
  <h1>添加FAQ</h1>
  <el-button @click="addFaq">+添加FAQ</el-button>
  <div v-for="(item, index) in faqList">
    <template v-if="item.type === 'edit'">
      <div>
        问题:<el-input v-model="item.qustion"></el-input> 答案:<el-input
          v-model="item.value"
        ></el-input>
      </div>
      <el-button @click="cancelFaq(index)">取消</el-button>
      <el-button @click="saveFaq(index)">保存</el-button>
    </template>

    <template v-else>
      <div class="qustion">
        <p>
          问题:<span>{{ item.qustion }}</span>
        </p>
        <p>
          答案:<span>{{ item.value }}</span>
        </p>
        <div class="edit-button">
          <el-button>修改</el-button>
          <el-button>删除</el-button>
        </div>
      </div>
    </template>
  </div>
</template>
<style lang="scss">
.qustion {
  border: 1px solid;
  padding: 20px;
}
</style>
